<template>
  <el-dialog 
    ref="dialogRef"
    :title="title" 
    v-model="dialogVisible"
    @close="onDialogClose"
    v-bind="$attrs"
  >
    <slot />
    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch, onMounted} from 'vue'

// eslint-disable-next-line
const emits = defineEmits(['update:modelValue', 'onClose'])
// eslint-disable-next-line
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    value: '标题'
  },
})

const dialogRef = ref(null)
const dialogVisible = ref(false)

onMounted(() => {
  dialogVisible.value = props.modelValue
})

watch(() => props.modelValue, () => {
  dialogVisible.value = props.modelValue
})

function onDialogClose() {
  dialogVisible.value = false
  emits('update:modelValue', false)
  emits('onClose', false)
}
</script>
